<template  slot-scope="scope">
  <div style="text-align: center">
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      :row-class-name="tableRowClassName"
      order
      align="center"
      stripe
      style="
        border-radius: 30px;
        width: 80%;
        margin: 0px auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      "
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isIndex"
        show-overflow-tooltip
        align="center"
        :index="typeIndex"
        type="index"
        :width="100"
      >
        <template slot="header">
          <span class="firstCol">序号</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="stall_size"
        align="center"
        label="车位大小"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="stall_code"
        align="center"
        label="车位编号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="stall_price"
        align="center"
        label="车位价格"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="stall_state"
        align="center"
        label="车位状态"
        width="120"
      >
      </el-table-column>

       <el-table-column
        prop="management.name"
        align="center"
        label="所在物业"
        width="120"
         column-key="management.name"
        :filters="[{ text: '杰信物业', value: '杰信物业' }, { text: '雅荷物业', value: '雅荷物业' }]"
      :filter-method="filterHandler"
      >
      </el-table-column>
     
      <el-table-column  label="车位图片">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.photo" alt="" style="width:300px;height:300px">
              <img slot="reference" :src="scope.row.photo" style="width: 70px;height: 70px">
            </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3, 5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter:{
        text:'',
        value:''
      },
      multipleSelectionP: [],
      pageInfo: [],
      currentPage: 1,
      isHidePage: false,
      isIndex: true,
      hasPagination: true,
      pagination: {
        pageIndex: 1,
        pageSize: 5,
      },
      layout: "total, sizes, prev, pager, next, jumper",
    };
  },
  methods: {
    handClick(column,event){
      alert(1);
    },
     filterHandler(value, row, column) {
     
        return row.management.name == value;
      },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.stall_state == "空闲") {
        return "success-row";
      } else if (row.stall_state == "出租中") {
        return "warning-row";
      }
      return "";
    },
    typeIndex(index) {
      const tabIndex =
        index + (this.pagination.pageIndex - 1) * this.pagination.pageSize + 1;
      return tabIndex;
    },

    loadStall() {
      var id = sessionStorage.getItem('userId');
      this.$axios
        .post("/getStallByUid", {
          uid: id,
          currentPage: this.pagination.pageIndex,
          pageSize: this.pagination.pageSize,
        })
        .then((res) => {
          this.pageInfo = res.data.data;
          console.log(this.pageInfo.list.length);
        })
        .catch((err) => {});
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.loadStall();
    },
    /**
     * 切换页码
     * @param { Number } pageIndex 页码
     */
    currentChange(pageIndex) {
      this.pagination.pageIndex = pageIndex;
      this.loadStall();
    },

    typeIndex(index) {
      const tabIndex =
        index + (this.pagination.pageIndex - 1) * this.pagination.pageSize + 1;
      return tabIndex;
    },
    filterAssignment(){
      for(var i=0;i<(this.pageInfo.list.length);i++){
        console.log("11111111111");
        this.filter[i].value=this.pageInfo.list[i].management.name;
        console.log(this.pageInfo.list[i].management.name);
        this.filter[i].text=this.pageInfo.list[i].management.name;
      }
    } 
  },
  mounted() {
    this.loadStall();
  },
};
</script>

<style>
.firstCol {
  width: 50px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>